import {GuiKeys} from "../../../script/controller/model/ControllerOpt";
import * as React from "../../../script/frame/apiModel/gui/React";
import {IProps, IStates, View} from "../../../script/frame/apiModel/gui/React";
import Tween from "../../tween/Tween";
import Easing from "../../tween/Easing";
import {ChatInfo, ToastWheelBarInterface} from "../../interface/GuiInterface";
import Configer from "../../../script/frame/apiModel/config/Configer";
import {ResourceKey} from "../../../script/constant/ResourceConstant";
import {TextAlign} from "../../../script/frame/apiModel/adapter/adapterInterface/model1/IFrameAdapter";

export interface ToastEle {
    str: string;
    pos: { x: number, y: number };
    alpha: number;
}

export interface IProp {
    getToasts: () => ChatInfo;
}
export interface IState {
    toastEles: ToastEle[];
}

export default class ToastWheelColBar extends ToastWheelBarInterface<IProp, IState> {
    endIndex = 0;

    maxEle = 10;
    destoryY = 0.64420;
    // baseY = 0.4;
    baseH = 0.02;
    distance = 0.4;

    tween: Tween<{ radix: number }>;

    constructor(props: IProps & IProp) {
        super(props);

        this.state = {
            visible: true,
            toastEles: [],
        }
    }

    render = () => {
        let hidden = false;

        // print('重画！！！！！！！！');
        let arr: ToastEle[] = [];
        for (let i = 0; i < this.maxEle; i++) {
            const ele = this.state.toastEles[i];
            const y = ele?.pos?.y;
            if (ele && (y > this.destoryY)) {
                // ele.pos.y = ele.pos.y - this.state.radix;
                arr.push(ele);
                hidden = false;
            } else {
                arr.push({ alpha: 0, str: undefined, pos: { x: 0, y: 0 } });
            }
        }
        const disableBlp = Configer.getResource(ResourceKey.disableBlp);

        return <View   key={GuiKeys.wheelGuiContent} style={{ hidden }}>
            {
                arr.map(
                    (ele, index, array) => {
                        let str = ele.str;
                        const pos = ele.pos;
                        if (str) {
                            return <View  key={`${GuiKeys.wheelGuiItem}|${index}`} style={{ width: 0.4, height: this.baseH, left: pos.x, top: pos.y, fontSize: 0.02, fontAlign: TextAlign.center }}>{str}</View>
                        }
                        return <View  key={`${GuiKeys.wheelGuiItem}|${index}`} style={{ hidden: true }}></View>
                    }
                )
            }
        </View>
    }

    addToastTask = (str: string) => {

        let len = this.state.toastEles.length;
        if (len >= this.maxEle) {
            this.state.toastEles.splice(0, 1);
            len = this.maxEle - 1;
        }

        for (let i = 0; i < len; i++) {
            const ele = this.state.toastEles[i];
            ele.pos.y = ele.pos.y - this.baseH;
        }

        // const size: { h: number, w: number } = { h: 0.2, w: 0.4 };
        const pos: { x: number, y: number }  = { x: 0.3, y: 0.864 };
        this.state.toastEles.push({ alpha: 1, str: str, pos: pos });

        const state: IState & IStates = {
            ...this.state,
        }
        this.setState(state, true);

        // Logger.toastError(JSON.stringify(this.state.toastEles.length))

        if (this.tween) {
            this.tween.stop();
        }

        this.tween = new Tween({ radix: this.distance }) // 创建一个新的tween，修改“coords”。
            .to({ radix: 0 }, 10000) //在500毫秒内移动到（300,200）。
            .easing(Easing.Quadratic.Out) // 使用缓和功能使动画平滑。
            .onUpdate((temp, elapsed) => {
                const len = this.state.toastEles.length;

                const eles: ToastEle[] = JSON.parse(JSON.stringify(this.state.toastEles))

                for (let i = 0; i < len; i++) {
                    const ele = eles[i];
                    if (ele.pos.y > this.destoryY) {
                        ele.pos.y = ele.pos.y - 0.001;
                    }
                }

                this.setState({
                    ... this.state,
                    toastEles: eles,
                }, true)
            })
        this.tween.start();
    }

    openBar = () => {
        const chatInfo = this.props.getToasts();
        const chats: string[] = JSON.parse(JSON.stringify(chatInfo.chats));
        const chatIndex = chatInfo.chatsIndex;
        const len = chats.length;

        let endIndex = this.endIndex;
        if (endIndex === chatIndex) {
        } else {
            const addNum = chatIndex - endIndex;
            for (let i = 0; i < addNum; i++) {
                const currentIndex = len - addNum + i;
                const str = chats[currentIndex];
                this.addToastTask(str);
            }
            this.endIndex = chatIndex;
        }
    }

    getVisible = () => {
        return this.state.visible;
    }


}